import React from "react";
import DemoComponent from "../../../src";

import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import Typography from "@mui/material/Typography";
import DeleteIcon from "@mui/icons-material/Delete";

const options = [
  "None",
  "Atria",
  "Callisto",
  "Dione",
  "Ganymede",
  "Hangouts Call",
  "Luna",
  "Oberon",
  "Phobos",
  "Pyxis",
  "Sedna",
  "Titania",
  "Triton",
  "Umbriel"
];

const extra = (
  <Stack spacing={2} direction="row">
    <Button size="small" variant="contained">
      Contained
    </Button>
    <Button size="small" variant="outlined">
      Outlined
    </Button>
  </Stack>
);

const avatar = {
  src: "https://img0.baidu.com/it/u=2552790179,2016080807&fm=253"
};

const menuModel = {
  icon: <MoreVertIcon />,
  menuOptions: options
};

const content = (
  <>
    <Stack my={2}>
      <Typography variant="subtitle2" gutterBottom component="div">
        subtitle. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
      </Typography>
      <Typography variant="body1" gutterBottom>
        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam
        beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
        quasi quidem quibusdam.
      </Typography>
    </Stack>

    <Stack spacing={2} direction="row">
      <Button size="small" variant="outlined" startIcon={<DeleteIcon />}>
        Delete
      </Button>
      <Button size="small" variant="outlined" startIcon={<DeleteIcon />}>
        Delete
      </Button>
    </Stack>
  </>
);

const Content: React.FC<{ children: React.ReactNode; extraContent: React.ReactNode }> = ({
  children,
  extraContent
}) => (
  <Stack direction="row" spacing={2} my={4} mx={2}>
    <div style={{ flex: 1 }}>{children}</div>
    <div className="image">{extraContent}</div>
  </Stack>
);

const DEMO = function () {
  const props = {
    title: "title",
    subTitle: "here is subTitle",
    tags: [{ context: "tag1" }, { context: "tag2" }],
    onBack: () => {
      console.log("back");
    },
    extra,
    menuModel,
    avatar
  };

  return (
    <>
      <DemoComponent {...props}>
        <Content
          extraContent={
            <img src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg" alt="content" />
          }>
          {content}
        </Content>
      </DemoComponent>
    </>
  );
};

export default DEMO;
